
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信单页面应用SPA更换title - 轩枫阁</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
		h2{
			text-align: center;
			margin: 20px auto;
		}
		iframe{
			width: 0;
			height: 0;
			border: none;
			background: transparent;
		}
	</style>
</head>
<body>
	<h2 id="demo1">123123213</h2>
	<h2 id="demo2"><a href="#demo2">demo2</a></h2>

	<script src="http://zeptojs.com/zepto.min.js"></script>
	<script>
	//基于jQuery或Zepto
	function change_title(title){
		document.title = title;
		// hack在微信等webview中无法修改document.title的情况
		var $iframe = $('<iframe src="/favicon.ico"></iframe>');
		$iframe.on('load',function() {
		    setTimeout(function() {
		        $iframe.off('load').remove();
		    }, 0);
		}).appendTo($('body'));
	}

	$('#demo1').on('click', function(){
		change_title('demo1 title');
	});


	// 原生触发
	function changeTitle(title){
		var body = document.getElementsByTagName('body')[0];
		document.title = title;
		var iframe = document.createElement("iframe");
		iframe.setAttribute("src", "/favicon.ico");

		iframe.addEventListener('load', function() {
			setTimeout(function() {
				iframe.removeEventListener('load');
				document.body.removeChild(iframe);
			}, 0);
		});
		document.body.appendChild(iframe);
	}

	document.getElementById('demo2').ontouchend = function(){
		changeTitle('demo2 title');
	}

	window.onhashchange = function(){
		var title = location.hash + ' title';
		change_title(title);
	}

	</script>
</body>
</html>